Explanation of Multimedia Implementation

Website

Due to the fact that I had already completed the main “skeleton” of the website (During the holidays) BEFORE the term lessons, I did not download the “template” website supplied by Paul Trani. As the whole website was made from scratch, therefore there will not be Initial and final developments for the website.

Theme

Old/ vintage, looking colors and pictures were used to fit the theme which I chose for my website. Examples of this can be seen in:

1. Using an old photo from 2007 of myself to edit in photoshop (as seen below)

2. Using video footage taken of Tokyo in the 1980s-1990s era.

3. Using the song Bay City which was released in 1983

4. Radio static sound added onto video

5. Using edited vintage photos from the internet to be included in the website

6. Using a static gif similar to that of an analogue tv as the background for the content page

Images

Image Before:

Image After:

For this image I used an old photo of me taken in 2007. The steps taken to edit the image are as follows.

1. First I traced myself and removed the background.

2. I used the background template below and added myself onto it. The background image color scheme was also reduced as it was too bright.

3. Followed the video: https://www.youtube.com/watch?v=QWiKrixVSbM, to use multiple layers of myself and create a “glitch effect

4. Added picture of a hanging lamp below and changed the color scheme. Yellow markers were used to give the effect of the light being turned on.

5. Added a person sitting down and applied a colored outline. A filter was also put on to blend in with the background

Image Optimization

I decided to optimize the images used in the website as by doing so, the time taken to load each page is significantly reduced.

For instance:

- Small images do not need to be high quality and can therefore be reduced in resolution. 

- Most monitors cannot display 4K images and therefore can be reduced to 1080p quality or 720p

The steps take for optimization are as follows.

1. Check the dimensions for the image, and determine whether, optimization is necessary.

2. Insert into photoshop with a smaller resolution

3. Save as jpg

4. Repeated for all other images that require optimizing

Alt Tags

Alt tags were added to assist those with visual disabilities in understanding the images embedded onto the webpages. All images and gifs except the background images were given alt tags

Twitter logo:

Bouncing ball gif

Header picture

Etc.